<template>
  <div class="phone-slider-container">
    <div class="slider-header">
      <h3>联系电话</h3>
      <p>点击左右箭头切换电话号码</p>
    </div>
    
    <div class="phone-slider">
      <button class="nav-button prev-button" @click="prevPhone" :disabled="currentIndex === 0">
        <i class="fas fa-chevron-left"></i>
      </button>
      
      <div class="phone-card" :key="currentIndex">
        <div class="phone-icon">
          <i class="fas fa-phone"></i>
        </div>
        <div class="phone-number">{{ currentPhone.number }}</div>
        <div class="phone-label">{{ currentPhone.label }}</div>
        <button class="copy-button" @click="copyPhoneNumber">
          <i class="fas fa-copy"></i>
          复制号码
        </button>
      </div>
      
      <button class="nav-button next-button" @click="nextPhone" :disabled="currentIndex === phoneNumbers.length - 1">
        <i class="fas fa-chevron-right"></i>
      </button>
    </div>
    
    <div class="slider-indicators">
      <span 
        v-for="(phone, index) in phoneNumbers" 
        :key="index"
        class="indicator"
        :class="{ active: index === currentIndex }"
        @click="goToPhone(index)"
      ></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PhoneSlider',
  data() {
    return {
      currentIndex: 0,
      phoneNumbers: [
        { number: '13665558161', label: '主要联系电话' },
        { number: '19810672089', label: '商务合作热线' },
        { number: '18355396697', label: '客服咨询电话' },
        { number: '19014496248', label: '商务合作热线' }
      ]
    }
  },
  computed: {
    currentPhone() {
      return this.phoneNumbers[this.currentIndex]
    }
  },
  methods: {
    prevPhone() {
      if (this.currentIndex > 0) {
        this.currentIndex--
      }
    },
    nextPhone() {
      if (this.currentIndex < this.phoneNumbers.length - 1) {
        this.currentIndex++
      }
    },
    goToPhone(index) {
      this.currentIndex = index
    },
    async copyPhoneNumber() {
      try {
        await navigator.clipboard.writeText(this.currentPhone.number)
        this.showCopySuccess()
      } catch (err) {
        // 如果clipboard API不可用，使用传统方法
        this.fallbackCopyTextToClipboard(this.currentPhone.number)
      }
    },
    
    fallbackCopyTextToClipboard(text) {
      const textArea = document.createElement('textarea')
      textArea.value = text
      textArea.style.top = '0'
      textArea.style.left = '0'
      textArea.style.position = 'fixed'
      textArea.style.opacity = '0'
      
      document.body.appendChild(textArea)
      textArea.focus()
      textArea.select()
      
      try {
        const successful = document.execCommand('copy')
        if (successful) {
          this.showCopySuccess()
        } else {
          this.showCopyError()
        }
      } catch (err) {
        this.showCopyError()
      }
      
      document.body.removeChild(textArea)
    },
    
    showCopySuccess() {
      // 临时改变按钮文本和样式
      const button = document.querySelector('.copy-button')
      if (button) {
        const originalText = button.innerHTML
        button.innerHTML = '<i class="fas fa-check"></i> 已复制'
        button.style.background = 'linear-gradient(135deg, #22c55e, #16a34a)'
        
        setTimeout(() => {
          button.innerHTML = originalText
          button.style.background = 'linear-gradient(135deg, #00d4ff, #5b73e8)'
        }, 2000)
      }
    },
    
    showCopyError() {
      // 显示复制失败提示
      const button = document.querySelector('.copy-button')
      if (button) {
        const originalText = button.innerHTML
        button.innerHTML = '<i class="fas fa-times"></i> 复制失败'
        button.style.background = 'linear-gradient(135deg, #ef4444, #dc2626)'
        
        setTimeout(() => {
          button.innerHTML = originalText
          button.style.background = 'linear-gradient(135deg, #00d4ff, #5b73e8)'
        }, 2000)
      }
    }
  }
}
</script>

<style scoped>
.phone-slider-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

.slider-header {
  text-align: center;
  margin-bottom: 30px;
}

.slider-header h3 {
  color: white;
  font-size: 1.8rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.slider-header p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
}

.phone-slider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.nav-button {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.nav-button:hover:not(:disabled) {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.nav-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.phone-card {
  flex: 1;
  margin: 0 20px;
  padding: 30px 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.phone-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s;
}

.phone-card:hover::before {
  left: 100%;
}

.phone-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #00d4ff, #5b73e8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  position: relative;
  animation: iconPulse 2s infinite;
}

.phone-icon::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4ff, #5b73e8);
  opacity: 0.3;
  animation: iconGlow 2s infinite;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes iconGlow {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.6; }
}

.phone-icon i {
  color: white;
  font-size: 1.5rem;
  position: relative;
  z-index: 1;
}

.phone-number {
  color: white;
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.phone-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.copy-button {
  background: linear-gradient(135deg, #00d4ff, #5b73e8);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
}

.copy-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 212, 255, 0.6);
}

.copy-button i {
  font-size: 0.8rem;
}

.slider-indicators {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: linear-gradient(135deg, #00d4ff, #5b73e8);
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.indicator:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .phone-slider-container {
    padding: 15px;
  }
  
  .phone-card {
    margin: 0 10px;
    padding: 25px 15px;
  }
  
  .phone-number {
    font-size: 1.5rem;
  }
  
  .nav-button {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .phone-slider {
    flex-direction: column;
    gap: 20px;
  }
  
  .phone-card {
    margin: 0;
    order: 2;
  }
  
  .nav-button {
    order: 1;
  }
  
  .next-button {
    order: 3;
  }
}
</style>
